<template>
	<transition class="animate__animated" enter-active-class="animate__flipInY" leave-active-class="animate__flipOutY">
		<view class="send-chat">
			<uni-nav-bar shadow left-icon="left" backgroundColor="blue" color="white" :rightText="text"
				@clickLeft="returnPage" @clickRight="submit" title="选择联系人" :statusBar="true" style="z-index: 999;" />
			<!-- 搜索 -->
			<Search :imgs="checked" />
			<!-- 滚动页面 -->
			<scroll-view class="address-book" scroll-y="true" :scroll-into-view="move" :scroll-with-animation="true"
				:show-scrollbar="false">
				<AddressBookItem :id="item.title" v-for="item,index in arr" :key="index" :title="item.title"
					:userInfo="item.userInfo" />
			</scroll-view>
		</view>
	</transition>
</template>

<script setup>
	import UniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import Search from '@/components/search/search.vue';
	import AddressBookItem from '@/components/address-books/address-book-item.vue'
	import {
		ref,
		onMounted,
		provide,
		computed
	} from 'vue';
	import {
		onNavigationBarButtonTap,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getAddressBooks
	} from '@/hooks/pinyin.js'
	const move = ref("Q")
	const checked = ref([])
	provide("checked", checked)
	const userInfo = ref([{
		id: 1,
		avatar: "../../static/logo.png",
		username: "Alan"
	}, {
		id: 2,
		avatar: "../../static/logo.png",
		username: "2爱情"
	}, {
		id: 3,
		avatar: "../../static/logo.png",
		username: "1其实"
	}, {
		id: 4,
		avatar: "../../static/logo.png",
		username: "Vlan2"
	}, {
		id: 5,
		avatar: "../../static/logo.png",
		username: "Xlan2"
	}, {
		id: 6,
		avatar: "../../static/logo.png",
		username: "Qlan2"
	}, {
		id: 7,
		avatar: "../../static/logo.png",
		username: "Qlan2"
	}, {
		id: 8,
		avatar: "../../static/logo.png",
		username: "中国"
	}, {
		id: 8,
		avatar: "../../static/logo.png",
		username: "中国"
	}, {
		id: 8,
		avatar: "../../static/logo.png",
		username: "中国"
	}, {
		id: 8,
		avatar: "../../static/logo.png",
		username: "中国"
	}])

	const arr = ref([])
	const isSelect = ref(false)
	provide("isSelect", isSelect)
	const text = computed(() => {
		if (!isSelect.value) return "";
		if (checked.value.length > 0) {
			return `确定(${checked.value.length})`
		}
		return "确定"
	})

	onMounted(() => {
		getAddressBooks(userInfo, arr)
	})
	onLoad((option) => {
		isSelect.value = JSON.parse(option.isSelect)
	})

	/**
	 * 返回上一页
	 */
	function returnPage() {
		uni.navigateBack({
			delta: 1
		})
	}

	/**
	 * 提交
	 */
	function submit() {
		if (!isSelect.value) return;

		console.log(checked.value)
	}
</script>

<style lang="scss" scoped>
	.send-chat {
		display: flex;
		flex-direction: column;

		.address-book {
			// height: 100%;
			// margin-top: 92upx;
			height: calc(100% - 92upx);

			&-item {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;

				&--header {
					font-size: 20upx;
					color: #aaa;
					padding: 8upx 10upx;
				}

				.userInfo {
					background-color: #ffffff;
					display: flex;
					align-items: center;
					gap: 16upx;
					padding: 20upx 20upx;
					border-bottom: 1upx solid #eee;

					&:active {
						background-color: #aaa;
					}

					.avatar {
						width: 60upx;
						height: 60upx;
						border-radius: 4upx;
					}

					.username {
						font-family: "PingFang SC Medium";
						font-size: 30upx;
					}

				}
			}
		}

	}
</style>